<template>
  <div>
    <div class="find_title white_bg" :class="{'isFixed': isFixed}">
      <ul>
        <li :class="{hot:indexTab==0}" @click="tabSwitch(0)"><span>全部</span></li>
        <li :class="{hot:indexTab==index+1}" @click="tabSwitch(index+1,menuItem)" v-for="(menuItem,index) in findMenu">
          <span>{{menuItem.dictValue}}</span></li>
      </ul>
    </div>
    <div class="clear"></div>
    <div class="find_page"
         v-infinite-scroll="moreList"
         infinite-scroll-disabled="loading"
         infinite-scroll-immediate-check="true"
         infinite-scroll-distance="100">
      <div class="find_list_left">
        <ul>
          <li v-for="item in findListLeft">
            <a @click="jumpFind(item.docId,item.docUrl)">
              <img :src="item.docUrl"/>
              <div class="item_cont">
                <h3>{{item.docTitle}}</h3>
                <p class="doc_cont">{{item.docDsc}}</p>
                <div class="find_time">
                  <span class="left">{{item.crtTime | endTimeDianC}}</span>
                  <em class="right iconfont icon-guanzhu">{{item.visitCount}}</em>
                </div>
                <div class="clear"></div>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <div class="find_list_right">
        <ul>
          <li v-for="item in findListRight">
            <a @click="jumpFind(item.docId,item.docUrl)">
              <img :src="item.docUrl"/>
              <div class="item_cont">
                <h3>{{item.docTitle}}</h3>
                <p>{{item.docDesc}}</p>
                <div class="find_time">
                  <span class="left">{{item.crtTime | endTimeDianC}}</span>
                  <em class="right iconfont icon-guanzhu">{{item.visitCount}}</em>
                </div>
                <div class="clear"></div>
              </div>
            </a>
          </li>
        </ul>
      </div>

    </div>
    <no-data v-if="noInfo"></no-data>
    <div class="loading-box" v-if="moreInfo" v-show="!noInfo">
      <list-loading v-on:clickEvent="clickMoreList" :noMoreCoupon="noMoreFind"></list-loading>
    </div>
    <div class="lastInfoMore" v-if="!moreInfo" v-show="!noInfo&&findList.length>4">没有更多</div>
    <footer-view v-if="isFoot"></footer-view>
  </div>
</template>
<script>
  import getData2 from '../../service/getData2.js'
  import * as types from '../../vuex/types.js'
  import * as types1 from '../../vuex/appendType'
  import listLoading from '../../componentes/global/listLoading.vue'
  import {mapState} from 'vuex'

  export default {
    name: "find",
    components: {
      listLoading
    },
    data() {
      return {
        indexTab: 0,
        loading: true,
        noMoreFind: true,
        findMenu: [],
        moreInfo: true,
        noInfo: false,
        isFixed: false,
        isFoot: true
      }
    },
    beforeRouteLeave(to, from, next) {
      if (this.$route.query.isFoot ==  0 && window.isBack) {
        window.isBack = false;
        window.wx.closeWindow();
      }
      //设置加载。。。page
      var el = document.querySelector(".pageLoad");
      if (el) {
        el.style.display = '-webkit-flex'
      }
      next();
    },
    created() {
      if(sessionStorage.getItem('externalLinks') === '/find?isFoot=false'){
        this.isFoot = false;
      }
      this.$store.commit("WAIT_LOADING", true); // 翻书动画
      // 监视滚动
      window.addEventListener('scroll', this.handleScroll);
      this.findHead();
      this.$store.commit(types1.FIND);
      this.$store.commit(types1.FIND_PAGE, 1);
      this.$store.commit(types.GET_SCORLL_STATUS, true);
      this.clickMoreList(0);
    },
    computed: {
      ...mapState({
        findList: state => state.find.findList,
        findListLeft: state => state.find.findListLeft,
        findListRight: state => state.find.findListRight,
        findPageLimit: state => state.find.findPageLimit
      })
    },
    mounted: function () {
      this.$nextTick(function () {
        if (this.$route.query.isFoot == 0) {
          this.isFoot = false;
        }
        window.addEventListener('scroll', this.scrollArtlist, false);
        this.$store.commit(types.HEAD_TEXT, "发现");
        this.$store.commit(types.HEAD_BACK_ICON, false);
        this.$store.commit(types.HEAD_MES_ICON, false);

      })
    },
    methods: {
      //监听滚动事件
      handleScroll() {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop >= 70) {
          this.isFixed = true
        } else if (scrollTop <= 0) {
          this.isFixed = false
        }
      },
      clickMoreList: function (dictId) {

        if (!this.noMoreFind) {//防止重复点击
          return
        }

        let me = this;
        this.noMoreFind = false;
        if (me.indexTab == 0) {
          var data = ''
        } else {
          var data = {"type": dictId}
        }
        this.$store.dispatch('findList', {method: 'post', data: data}).then(function (rep) {
          if (rep.content.docList) {
            if (rep.content.docList.length <= 0) {
              me.noInfo = true;
            } else {
              me.noInfo = false;
            }
            if (rep.content.docList.length < me.findPageLimit) {
              setTimeout(function () {me.noMoreFind = true;}, 300);
              me.moreInfo = false;
            }
            ;
            if (rep.content.docList.length == me.findPageLimit) {
              me.moreInfo = true;
              me.loading = false;
              me.noMoreFind = true;
            }
          } else {
            setTimeout(function () {me.noMoreFind = true;}, 300);
          }
        }).catch(function (rep) {
          setTimeout(function () {me.noMoreFind = true;}, 300);
        });
      },
      moreList: function () {
        // console.log(111);
        this.loading = true;
        this.noMoreFind = true;
        this.clickMoreList();

      },
      //切换
      tabSwitch: function (num,item) {
        this.$store.commit(types1.FIND);
        this.$store.commit(types1.FIND_PAGE, 1)
        this.indexTab = num;
        this.noMoreFind = true;
        this.moreInfo = true;
        if(num==0){
        	this.clickMoreList();
        }else{
        	this.clickMoreList(item.dictId);
        }
        
      },
      jumpFind: function (id, img) {
        this.$router.push({path: '/findDetail', query: {docId: id, img: img}});
      },
      //发现类型
      findHead: function () {
        var me = this;
        getData2.findType({}).then(function (rep) {
          me.findMenu = rep.content.info;
          // document.getElementById('findTitle').scrollLeft=500;
          // document.getElementById('findTitle').scrollLeft=0;
          // console.log(1111)
        });

      }
    }

  }
</script>
<style scoped>
  .isFixed {
    position: fixed;
    top: 0;
    z-index: 10;
  }

  .find_title {
    height: 3rem;
    border-bottom: 1px solid #e6e6e6;
    /*background: #fff;*/
    line-height: 3rem;
    overflow-x: scroll;
    overflow-y: hidden;
  }

  .find_title ul {
    width: 100000%;
    /*height: auto;*/
  }

  .find_title li {
    /*width: 20%;*/
    float: left;
    color: #444;
    text-align: center;
    font-size: 1rem;
    padding: 0 0.6rem;
  }

  .find_title li span {
    padding: 0 0.2rem;
  }

  .find_title li.hot span {
    color: #ec4e8b;
    display: inline-block;
    box-sizing: border-box;
    height: 2.9rem;
    border-bottom: 2px solid #ec4e8b;
  }

  .find_page .item_cont p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    color: #666;
    margin-bottom: 0.2rem
  }
</style>
